import './index.scss'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react';
import { getToken } from '../../utils/token';
import { getStorage, storageKey } from '../../utils/storage';
import ConnectWallet from '../ConnectWallet';

function Header() {
  const navigate = useNavigate()
  const [token, setToken] = useState(getToken());
  const walletShortAddress = getStorage(storageKey.walletShortAddress);
  const walletIcon = getStorage(storageKey.walletIcon);

  useEffect(() => {
    setInterval(() => {
      setToken(getToken());
    }, 1000)
  })

  /** 跳转首页 */
  const goHome = () => {
    navigate('/');
    setCurrentMenu(0);
  }

  /** 菜单列表 */
  const menus = [
    { id: 1, name: 'Product', router: '/product' },
    { id: 2, name: 'Node', router: '/node' },
    { id: 3, name: 'FAQ', router: '/faq' },
    { id: 4, name: 'Personal Center', router: '/person' },
  ]

  /** 当前选中菜单 */
  const [currentMenu, setCurrentMenu] = useState(0);

  /** 选择菜单 */
  const selectMenu = (e) => {
    const { id, router } = e;
    navigate(router);
    setCurrentMenu(id);
  }

  /** 钱包已连接 */
  const onConnected = () => {
    
  }

  return (
    <div className='header'>
      <img className='logo' src={require('../../assets/logo.png')} alt="" onClick={goHome}/>
      <div className='right'>
        <div className='menu'>
          {
            menus.map(item => 
              <div 
                className={`menu-item ${currentMenu === item.id ? 'active' : ''}`}
                key={item.id}
                onClick={() => selectMenu(item)}
              >
                {item.name}
              </div>
            )
          }
        </div>
        <div className='telegrame'>telegrame</div>
        {
          token ? (
            <div className='islogin'>
              <img alt="Wallet logo" width={16} height={16} src={walletIcon} />
              <div>{walletShortAddress}</div>
              <img className='select-icon' alt="Wallet select" src={require('../../assets/down-arrow.png')} />
            </div>
          ) : (
            <ConnectWallet onConnected={onConnected}></ConnectWallet>
          )
        }
      </div>
    </div>
  )
}

export default Header